import { CommonUtil } from './common';
import { Component, forwardRef, OnInit } from '@angular/core';
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
import { OnChangeType } from 'ng-zorro-antd/core/types';

@Component({
	selector: 'nz-hour',
	template: `<div class="nz-hour">
					<nz-radio-group [(ngModel)]="type" style="width: 100%;" (ngModelChange)="valueChange()">
						<div class="item">
							<label nz-radio nzValue="TYPE_EVERY">每时</label>
						</div>
						<div class="item">
							<label nz-radio nzValue="TYPE_RANGE">周期</label>
							<div class="nz-cron-group">
									<nz-input-group nzAddOnBefore="从" nzAddOnAfter="-" class="cron-input-group">
										<nz-input-number (ngModelChange)="valueChange()" [(ngModel)]="valueRange.start" [nzMin]="0" [nzMax]="23" [nzStep]="1" [nzFormatter]="limitDecimals" [nzParser]="limitDecimals"></nz-input-number>
									</nz-input-group>
									<nz-input-group  nzAddOnAfter="时">
										<nz-input-number (ngModelChange)="valueChange()" [(ngModel)]="valueRange.end" [nzMin]="0" [nzMax]="23" [nzStep]="1" [nzFormatter]="limitDecimals" [nzParser]="limitDecimals"></nz-input-number>
									</nz-input-group>
							</div>
							<span style="font-size: 15px;color:#d9d9d9;margin-left: 10px;">(0-23)</span>
						</div>
						<div class="item">
							<label nz-radio nzValue="TYPE_LOOP">按照</label>
							<div class="nz-cron-group">
									<nz-input-group nzAddOnBefore="从" nzAddOnAfter="时开始，每" class="cron-input-group">
										<nz-input-number (ngModelChange)="valueChange()" [(ngModel)]="valueLoop.start" [nzMin]="0" [nzMax]="24" [nzStep]="1" [nzFormatter]="limitDecimals" [nzParser]="limitDecimals"></nz-input-number>
									</nz-input-group>
									<nz-input-group  nzAddOnAfter="时执行一次">
										<nz-input-number (ngModelChange)="valueChange()" [(ngModel)]="valueLoop.interval" [nzMin]="0" [nzMax]="24" [nzStep]="1" [nzFormatter]="limitDecimals" [nzParser]="limitDecimals"></nz-input-number>
									</nz-input-group>
							</div>
							<span style="font-size: 15px;color:#d9d9d9;margin-left: 10px;">(0/24)</span>
							
						</div>
						<div class="item" style="display:block;">
							<label nz-radio nzValue="TYPE_SPECIFY" style="vertical-align: top;">指定</label>
							<nz-checkbox-group [(ngModel)]="secondSpecifyOpt" (ngModelChange)="valueChange()"></nz-checkbox-group>
						</div>
					</nz-radio-group>
				</div>
	`,
	styles: [`
	`],
	providers: [
		{
			provide: NG_VALUE_ACCESSOR,
			useExisting: forwardRef(() => NzHourComponent),
			multi: true
		}
	],
})
export class NzHourComponent extends CommonUtil implements ControlValueAccessor, OnInit {

	valueList = this.hourSpecifyOpt;
	onChange: OnChangeType = () => { };
	constructor() {
		super();
	}

	ngOnInit() {

	}

	valueChange() {
		setTimeout(() => {
			const value = this.getValue();
			this.onChange(value);
		});
	}

	writeValue(formVal: any): void {
		if (formVal) {
			this.init(formVal);
		}
	}
	registerOnChange(fn: any): void {
		this.onChange = fn;
	}
	registerOnTouched(fn: any): void {
	}
	setDisabledState?(isDisabled: boolean): void {
	}

}
